<template>
  <div class="content-wraper">
    <div class="detail">
      <com-table :data="dataList" :columns="columns" :total="total" @pageChange="pageChange">
        <template v-slot:psTime="{row: {psTime}}">
          {{ dateFormat(psTime) }}
        </template>
        <template v-slot:status="{row}">
          <a class="com-link" style="text-decoration:underline;" @click="getWorkflowDetail(row)">{{ row.status | formateFlowStatus }}</a>
        </template>
        <template v-slot:applyTime="{row: {applyTime}}">
          {{ dateFormat(applyTime) }}
        </template>
        <template v-slot:options="{row}">
          <el-button type="success" size="mini" @click="startProcess(row)">打印</el-button>
        </template>
      </com-table>
    </div>
    <!-- -->
    <section>
      <div v-show="printIs == true" id="printoder" ref="print">
        <div class="content">
          <h5>麻城市宏远路桥工程有限公司项目资金申请支付审批表</h5>
          <div class="head">
            <div>申请日期：{{ data.applyTime }}</div>
            <div>金额单位： 元</div>
          </div>
          <div class="name">
            <div class="project">部门名称（盖章）</div>
            <div class="project-name">{{ data.departmentName }}</div>
          </div>
          <div class="table">
            <div class="td flex">支付对象</div>
            <div class="td-2 flex border-l">支付内容</div>
            <div class="td-1  border-l">累计开票金额（已开发票）</div>
            <div class="td-2 flex border-l">已支付金额</div>
            <div class="td-3 flex border-l">按合同本次申请支付金额</div>
            <div class="td-3 flex border-l">支付比例</div>
          </div>
          <div v-for="(item,index) in data.lstDetail" :key="index" class="table">
            <div class="td flex">{{ item.payObject }}</div>
            <div class="td-2 flex border-l">
              {{ getDictName(paymentFundUse, item.payContent) }}
            </div>
            <div class="td-1 flex border-l">
              {{ item.payAmount }}
            </div>
            <div class="td-2 flex border-l">
              {{ item.approvedAmount }}
            </div>
            <div class="td-3 flex border-l">
              {{ item.settleAmount }}
            </div>
            <div class="td-3 flex border-l">
              {{ item.remark }}
            </div>
          </div>
          <div class="flex">
            <div class="left">
              <div class="left-text1">
                <div class="w-107">填报人</div>
                <div class="text" />
              </div>
              <div class="left-text2">资金申请人</div>
            </div>
            <div class="right">
              <div class="right-text1">
                <div class="right-text">财务负责人</div>
              </div>
              <div class="right-text2">分管财务领导审批</div>
            </div>
          </div>
          <div class="flex">
            <div class="left">
              <div class="left-text3">部门分管领导意见</div>
            </div>
            <div class="right">
              <div class="right-text4">主管领导意见</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { getOtherPaymentFinishInfoList } from '@/api/runMoneyManage'
import moment from 'moment'
import { getDictName } from '@/utils/comm'
import { workflowStatus, paymentFundUse } from '@/utils/dicData'
export default {
  name: 'ProjectPurchaseStorehouseInfo',
  components: {
  },
  data() {
    return {
      name: '',
      getDictName,
      workflowStatus,
      paymentFundUse,
      printIs: false,
      data: {},
      dataList: [],
      total: 0,
      pageParams: {
        pageNum: 1,
        pageSize: 10
      },
      showModal: false,
      optType: 'add',
      unitDetail: {},
      columns: [
        {
          label: '申请时间',
          prop: 'applyTime',
          slot: 'applyTime'
        },
        {
          label: '部门名称',
          prop: 'departmentName'
        },
        // {
        //   label: '支付对象',
        //   prop: 'payObject'
        // },
        // {
        //   label: '支付内容',
        //   prop: 'payContent'
        // },
        // {
        //   label: '结算金额',
        //   prop: 'settleAmount'
        // },
        // {
        //   label: '支付金额',
        //   prop: 'payAmount'        },
        {
          fixed: 'right',
          label: '操作',
          prop: 'options',
          slot: 'options'
        }
      ]
    }
  },
  mounted() {
    this.getDataList()
  },
  methods: {
    startProcess(data) {
      this.data = data
      this.printIs = true
      setTimeout(() => {
        this.$print(this.$refs.print)
      }, 500)
      setTimeout(() => {
        this.printIs = false
      }, 1000)
    },
    dateFormat(data) {
      if (data) {
        return moment(data).format('YYYY-MM-DD')
      } else {
        return ''
      }
    },
    pageChange(data) {
      this.pageParams = data
      this.getDataList()
    },
    getDataList() {
      const params = {
        ...this.pageParams
      }
      getOtherPaymentFinishInfoList(params).then(res => {
        const { data, total } = res.data || {}
        if (data) {
          this.dataList = data
          this.dataList.forEach(item => {
            item.applyTime = moment(item.applyTime).format('YYYY-MM-DD')
          })
          this.total = total - 0
        }
      })
    },
    search() {
      this.pageParams.pageNum = 1
      this.getDataList()
    },
    reset() {

    }

  }
}
</script>

<style lang="scss" scoped>
.search-box {
  height: 50px;
}
.detail{
  height: calc(100% - 50px);
}

#printoder {
  .content {
    width: 794px;
    height: 1173px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    border-left: 1px solid #000;
    text-align: center;
  }
  .head {
    display: flex;
    justify-content: space-between;
    padding: 20px;
  }
  h5 {
    font-size: 20px;
  }
  .name {
    width: 100%;
    display: flex;
    align-items: center;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    .project {
      width: 242px;
      height: 100%;
      padding: 20px 0px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-right: 1px solid #000;
    }
    .project-name {
      width: 552px;
      padding: 20px 0px;

      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .table {
    width: 100%;
    display: flex;
    // align-items: center;
    // justify-content: center;
    border-bottom: 1px solid #000;
    .td {
      width: 240px;
      padding: 20px 0px;

    }
    .td-1 {
      width: 121px;
      padding: 20px 0px;

    }
    .td-2 {
      width: 108px;
      padding: 20px 0px;

    }
    .td-3 {
      width: 103px;
      padding: 20px 0px;

    }
  }
  .fill {
    width: 100%;
    border-bottom: 1px solid #000;
    .fill-left {
      .person {
        width: 105px;
        padding: 55px 0;
      }
    }

    .bot {
      display: flex;
      justify-content: space-between;
    }
    .bto-left {
      width: 105px;
    }
    .bot-right {
      width: 120px;
    }
  }
}
.left {
  width: 350px;
  border-bottom: 1px solid #000;
  .left-text1 {
    width: 100%;
    line-height: 20px;
    border-bottom: 1px solid #000;
    .text {
      width: 240px;
    }
    .w-107 {
      width: 107px;
      border-right: 1px solid #000;
      line-height: 21px;
      padding: 30px 0px 30px 0px;
    }
  }
  .left-text2 {
    width: 107px;
    border-right: 1px solid #000;
    padding: 30px 0px 30px 0px;
    line-height: 20px;
  }
  .left-text3 {
    width: 107px;
    padding: 50px 0px 50px 0px;
    border-right: 1px solid #000;
    line-height: 20px;
  }
}

.right {
  width: 447px;
  // height: 160px;
  border-left: 1px solid #000;
  border-bottom: 1px solid #000;
  .right-text1 {
    width: 100%;
    line-height: 20px;
    border-bottom: 1px solid #000;
    .right-text {
    width: 121px;
    line-height: 20px;
    padding: 31px 0px 30px 0px;
    border-right: 1px solid #000;
    }
  }
  .right-text2 {
    width: 121px;
    border-right: 1px solid #000;
    padding: 30px 0px 30px 0px;
    line-height: 20px;
  }
  .right-text4 {
    width: 121px;
    padding: 60px 0px 60px 0px;
    line-height: 20px;
    border-right: 1px solid #000;
  }
}

.border-r {
  border-right: 1px solid #000;
}

.border-l {
  border-left: 1px solid #000;
}

.border-t {
  border-top: 1px solid #000;
}

.border-b {
  border-bottom: 1px solid #000;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
